<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="ruleForm.sex" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="职业" prop="work">
          <el-input v-model="ruleForm.work" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="ruleForm.address" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="配镜日期" prop="buyTime">
          <el-date-picker v-model="ruleForm.buyTime" type="date" placeholder="配镜日期" value-format="yyyy-MM-dd"
            :disabled="!edit">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="取镜日期" prop="takeTime">
          <el-date-picker v-model="ruleForm.takeTime" type="date" placeholder="取镜日期" value-format="yyyy-MM-dd"
            :disabled="!edit">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="球镜R/L"> -->
        <el-form-item label="右眼度数">
          <el-input v-model="ruleForm.sphere" :disabled="!edit"></el-input>
        </el-form-item>
        <!-- <el-form-item label="柱镜R/L"> -->
        <el-form-item label="右眼矫正视力">
          <el-input v-model="ruleForm.cylinder" :disabled="!edit"></el-input>
        </el-form-item>
        <!-- <el-form-item label="轴向R/L"> -->
        <el-form-item label="左眼度数">
          <el-input v-model="ruleForm.axial" :disabled="!edit"></el-input>
        </el-form-item>
        <!-- <el-form-item label="下加光R/L"> -->
        <el-form-item label="左眼矫正视力">
          <el-input v-model="ruleForm.downlight" :disabled="!edit"></el-input>
        </el-form-item>
        <!-- <el-form-item label="瞳距R/L"> -->
        <el-form-item label="瞳距">
          <el-input v-model="ruleForm.centrometer" :disabled="!edit"></el-input>
        </el-form-item>
        <!-- <el-form-item label="矫正视力R/L"> -->
        <el-form-item label="下加光">
          <el-input v-model="ruleForm.corrected" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="原镜光度R/L">
          <el-input v-model="ruleForm.luminosity" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="镜架名称">
          <el-input v-model="ruleForm.frameName" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="镜架价格（元）">
          <el-input v-model="ruleForm.framePrice" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="镜片名称">
          <el-input v-model="ruleForm.lensName" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="镜片价格（元）">
          <el-input v-model="ruleForm.lensPrice" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="太阳镜名称">
          <el-input v-model="ruleForm.sun_name" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="太阳镜价格（元）">
          <el-input v-model="ruleForm.sun_price" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="其他">
          <el-input v-model="ruleForm.other_name" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="其他价格（元）">
          <el-input v-model="ruleForm.other_price" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ruleForm.remarks" :disabled="!edit"></el-input>
        </el-form-item>
        <el-form-item label="总价" prop="price">
          <el-input v-model="ruleForm.price" :disabled="!edit"></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button type="info" @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" @click="save" v-if="edit">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        edit: false,
        ruleForm: {
          name: "",
          sex: "",
          age: "",
          work: "",
          phone: "",
          address: "",
          buyTime: "",
          takeTime: "",
          sphere: "",
          cylinder: "",
          axial: "",
          downlight: "",
          centrometer: "",
          corrected: "",
          luminosity: "",
          frameName: "",
          framePrice: "",
          lensName: "",
          lensPrice: "",
          sun_name: "",
          sun_price: "",
          other_name: "",
          other_price: "",
          remarks: "",
          price: ""
        },
        rules: {
          name: [{
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }],
          sex: [{
            required: true,
            message: "请输入性别",
            trigger: "blur"
          }],
          age: [{
            required: true,
            message: "请输入年龄",
            trigger: "blur"
          }],
          // work: [{
          //   required: true,
          //   message: "请输入职业",
          //   trigger: "blur"
          // }],
          phone: [{
            required: true,
            message: "请输入电话",
            trigger: "blur"
          }],
          // address: [{
          //   required: true,
          //   message: "请输入住址",
          //   trigger: "blur"
          // }],
          buyTime: [{
            required: true,
            message: "请选择配镜日期",
            trigger: "blur"
          }],
          takeTime: [{
            required: true,
            message: "请选择取镜日期",
            trigger: "blur"
          }],
          price: [{
            required: true,
            message: "请输入总价",
            trigger: "blur"
          }]
        }
      };
    },
    created() {

    },
    mounted() {
      if (this.$store.state.status != 'add') {
        // 编辑或查看
        this.ruleForm.name = this.$store.state.detailData.name
        this.ruleForm.sex = this.$store.state.detailData.sex
        this.ruleForm.age = this.$store.state.detailData.age
        this.ruleForm.work = this.$store.state.detailData.occupation
        this.ruleForm.phone = this.$store.state.detailData.phone
        this.ruleForm.address = this.$store.state.detailData.address
        this.ruleForm.buyTime = this.$store.state.detailData.matchTime
        this.ruleForm.takeTime = this.$store.state.detailData.fetchTime
        this.ruleForm.sphere = this.$store.state.detailData.ball
        this.ruleForm.cylinder = this.$store.state.detailData.pillar
        this.ruleForm.axial = this.$store.state.detailData.axle
        this.ruleForm.downlight = this.$store.state.detailData.below
        this.ruleForm.centrometer = this.$store.state.detailData.centrometer
        this.ruleForm.corrected = this.$store.state.detailData.vision
        this.ruleForm.luminosity = this.$store.state.detailData.light
        this.ruleForm.frameName = this.$store.state.detailData.mirrorName
        this.ruleForm.framePrice = this.$store.state.detailData.mirrorPrice
        this.ruleForm.lensName = this.$store.state.detailData.sliceName
        this.ruleForm.lensPrice = this.$store.state.detailData.slicePrice
        this.ruleForm.sun_name = this.$store.state.detailData.sunName
        this.ruleForm.sun_price = this.$store.state.detailData.sunPrice
        this.ruleForm.other_name = this.$store.state.detailData.otherName
        this.ruleForm.other_price = this.$store.state.detailData.otherPrice
        this.ruleForm.remarks = this.$store.state.detailData.remark
        this.ruleForm.price = this.$store.state.detailData.allPrice
        if (this.$store.state.status === 'edit') {
          this.edit = true
        } else {
          this.edit = false
        }
      } else {
        this.edit = true
      }
    },
    methods: {
      save() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.$store.state.status === 'add') {
              // 新增
              this.getData()
            } else {
              // 修改
              this.resetData()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async getData() {
        const {
          data: res
        } = await this.$http({
          url: "project/addProject?name=" + this.ruleForm.name + "&sex=" + this.ruleForm.sex + "&age=" + this
            .ruleForm.age + "&occupation=" + this.ruleForm.work + "&phone=" + this.ruleForm.phone + "&address=" +
            this.ruleForm.address + "&match_time=" + this.ruleForm.buyTime + "&fetchTime=" + this.ruleForm
            .takeTime + "&ball=" + this.ruleForm.sphere + "&pillar=" + this.ruleForm.cylinder + "&axle=" + this
            .ruleForm.axial + "&below=" + this.ruleForm.downlight + "&centrometer=" + this.ruleForm.centrometer +
            "&vision=" + this.ruleForm.corrected + "&light=" + this.ruleForm.luminosity + "&mirrorName=" + this
            .ruleForm.frameName + "&mirrorPrice=" + this.ruleForm.framePrice + "&sliceName=" + this.ruleForm
            .lensName + "&slicePrice=" + this.ruleForm.lensPrice + "&sunName=" + this.ruleForm.sun_name +
            "&sunPrice=" + this.ruleForm.sun_price + "&otherName=" + this.ruleForm.other_name + "&otherPrice=" +
            this.ruleForm.other_price + "&remark=" + this.ruleForm.remarks + "&allPrice=" + this.ruleForm.price,
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        this.$message.success("添加成功！")
        this.$router.push("/user")
      },
      async resetData() {
        const {
          data: res
        } = await this.$http({
          url: "project/updateProject?id=" + this.$route.query.id + "&name=" + this.ruleForm.name + "&sex=" + this
            .ruleForm.sex + "&age=" + this
            .ruleForm.age + "&occupation=" + this.ruleForm.work + "&phone=" + this.ruleForm.phone + "&address=" +
            this.ruleForm.address + "&match_time=" + this.ruleForm.buyTime + "&fetchTime=" + this.ruleForm
            .takeTime + "&ball=" + this.ruleForm.sphere + "&pillar=" + this.ruleForm.cylinder + "&axle=" + this
            .ruleForm.axial + "&below=" + this.ruleForm.downlight + "&centrometer=" + this.ruleForm.centrometer +
            "&vision=" + this.ruleForm.corrected + "&light=" + this.ruleForm.luminosity + "&mirrorName=" + this
            .ruleForm.frameName + "&mirrorPrice=" + this.ruleForm.framePrice + "&sliceName=" + this.ruleForm
            .lensName + "&slicePrice=" + this.ruleForm.lensPrice + "&sunName=" + this.ruleForm.sun_name +
            "&sunPrice=" + this.ruleForm.sun_price + "&otherName=" + this.ruleForm.other_name + "&otherPrice=" +
            this.ruleForm.other_price + "&remark=" + this.ruleForm.remarks + "&allPrice=" + this.ruleForm.price,
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        this.$message.success("修改成功！")
        this.$router.push("/user")
      },
    },
  };

</script>

<style lang="less" scoped>
  .el-card {
    padding: 20px 40px;
  }

  .el-form-item {
    width: 50%;
    display: inline-block;

    .el-input {
      width: 300px;
    }

    // /deep/ .el-form-item__label {
    //   width: 120px !important;
    // }
  }

  .btns {
    display: flex;
    justify-content: center;
    margin-top: 60px;

    .el-button {
      width: 100px;
      margin-right: 20px;
    }
  }

</style>
